<template>
	<view class="advertise">
		<image src="../../static/img/whq/a84a94af97743d0df715917ab3acc84.png" mode="" class="adverimage"></image>
		<view class="timer">
			{{ countdown }} <text @click="getLogin()">跳过</text>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		onBeforeUnmount,
		ref
	} from 'vue';
	const countdown = ref(3);
	let timer = null;
	const getLogin = () => {
		clearInterval(timer);
		redirectToNextPage();
	};
	const redirectToNextPage = () => {
		// 在这里实现页面跳转的逻辑
		// 在倒计时结束后执行页面跳转
		uni.redirectTo({
			url: "/pages/login/login"
		})
		console.log('跳转到下一页');
	};
	const startCountdown = () => {
		const timer = setInterval(() => {
			if (countdown.value > 0) {
				countdown.value--;
			} else {
				clearInterval(timer);
				redirectToDestination();
			}
		}, 1000); // 每秒更新一次
	};

	onMounted(() => {
		timer = setInterval(() => {
			if (countdown.value > 0) {
				countdown.value--;
			} else {
				clearInterval(timer);
				redirectToNextPage();
			}
		}, 1000);
	});

	onBeforeUnmount(() => {
		clearInterval(timer);
	});
</script>

<style scoped lang="less">
	.advertise {
		position: relative;
		height: 96vh;
		width: 100vw;
		background-size: contain;
		/* 或者 background-size: cover; */
		background-repeat: no-repeat;
	}

	.adverimage {
		position: absolute;
		width: 100vw;
		height: 100%;
	}

	.timer {
		position: absolute;
		background-color: #8d8d8da6;
		width: 120rpx;
		height: 50rpx;
		overflow: hidden;
		align-items: center;
		margin-left: 645rpx;
	}
</style>